<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, watch, nextTick, onBeforeUnmount } from 'vue'
import { headersStore } from '@/stores/apiHeader'
import { useDialogStore } from '@/stores/dialog'
import {
  DEFAULT_ECHARTS_FONTSIZE,
  DIALOG_ECHARTS_FONTSIZE,
} from '@/Utils/setting'
const dialogStore = useDialogStore()
const { dialogInfo } = dialogStore

const fontSize = dialogInfo.visible
  ? DIALOG_ECHARTS_FONTSIZE
  : DEFAULT_ECHARTS_FONTSIZE
const dialogInfoVisible = dialogInfo.visible

const language_id = headersStore().language_id
// 调整px到合适的大小
const changePixelSize = (px: number) => {
  // 获取当前屏幕宽度
  const width = document.body.clientWidth
  let res = (px / 1920) * width
  // 保留整数
  return parseInt(res.toFixed(0))
}

// 接收父组件的数据
const props = defineProps<{
  chartData: any
}>()
props.chartData.name = props.chartData.name + Math.random()

let myChart: echarts.ECharts

// 绘制图表
const drawChart = () => {
  // 判断是否能获取到dom,如果不能直接结束
  const theDom = document.getElementById(props.chartData.name)
  if (!theDom) {
    return ''
  }

  // 绘制新图表
  myChart = echarts.init(document.getElementById(props.chartData.name))
  let option = {
    tooltip: {
      // trigger: 'axis',
      backgroundColor: 'rgba(0,0,0,0.7)',
      padding: [
        changePixelSize(10), // 上
        changePixelSize(20), // 右
        changePixelSize(10), // 下
        changePixelSize(20), // 左
      ],
      textStyle: {
        fontSize: changePixelSize(fontSize),
        color: '#fff',
      },
      // axisPointer: {
      //   type: 'shadow',
      // },
      position:
        language_id == 'zh-cn'
          ? function (point, params, dom, rect, size) {
              const [pointX, pointY] = point
              const [boxWidth, boxHeight] = size.contentSize
              const x = boxWidth > pointX ? pointX + 10 : pointX - boxWidth
              const y = boxHeight > pointY ? 5 : pointY - boxHeight
              return [x, y]
            }
          : function (pos, params, dom, rect, size) {
              // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
              var obj = { top: 30 }
              obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 10
              return obj
            },
    },
    dataZoom: props.chartData.dataZoom,
    legend: props.chartData.legend,
    grid: props.chartData.grid,
    xAxis: props.chartData.xAxis,
    yAxis: props.chartData.yAxis,
    series: props.chartData.series,
  }
  myChart.setOption(option)
}
const destroyChart = () => {
  // 销毁图表实例
  if (myChart) {
    myChart.dispose()
    myChart = null
  }
}
onBeforeUnmount(() => {
  // 销毁图表实例
  destroyChart()
})
// 组件挂载后绘制图表
onMounted(() => {
  nextTick(() => {
    drawChart()
  })
})
</script>

<template>
  <div
    :class="{
      'echart-box': true,
      'dialog-box': dialogInfoVisible == true,
    }"
  >
    <div class="chart" :id="chartData.name"></div>
  </div>
</template>

<style lang="scss" scoped>
.echart-box {
  position: relative;
  width: 100%;
  height: 260px;
  .chart {
    width: 100%;
    height: 100%;
  }
}

.dialog-box {
  height: calc(
    500px - 45px
  );
}
</style>
